<template>
    <el-dialog :close-on-click-modal="false" :title="titleMap[mode]" v-model="visible" :width="900" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="130px" label-position="right" v-loading="loading">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="头像" prop="portrait">
                        <sc-upload v-model="form.portrait" title="上传头像" cropper :aspectRatio="1/1"></sc-upload>
                        <div class="" style="font-size:12px;line-height:2;padding-top:0px;color:#999;">
                            建议尺寸：98x98
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证正反面" prop="idCardImg">
                        <scUploadMultiple v-model="form.idCardImg" title="上传图片" :limit="2"></scUploadMultiple>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="教练姓名" prop="name">
                        <el-input v-model="form.name" placeholder="请输入教练姓名" clearable :maxlength="50" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="教练头衔" prop="titleId">
                        <el-select
                        style="width: 100%;"
                        v-model="form.titleId"
                        filterable
                        clearable>
                            <el-option
                                v-for="item in teacherTitles"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="银行卡号" prop="bankCode">
                        <el-input v-model="form.bankCode" placeholder="请输入银行卡号" clearable :maxlength="20" show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="开户人姓名" prop="bankUserName">
                        <el-input v-model="form.bankUserName" placeholder="请输入开户人姓名" clearable :maxlength="50" show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="教练等级" prop="level">
                        <el-radio-group v-model="form.level">
                            <el-radio :label="1">初级</el-radio>
                            <el-radio :label="2">中级</el-radio>
                            <el-radio :label="3">高级</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="生日" prop="birthday">
                        <el-date-picker
                            style="width: 100%;"
                            v-model="form.birthday"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
                            type="date"
                            placeholder="选择日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="mobile">
                        <el-input v-model="form.mobile" placeholder="请输入手机号码" clearable :maxlength="11" show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="开户银行全称" prop="bankFullName">
                        <el-input v-model="form.bankFullName" placeholder="请输入开户行全称" clearable :maxlength="100" show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="推荐人" prop="recommender">
                        <el-input v-model="form.recommender" placeholder="请输入机构、教练推荐人" clearable :maxlength="50" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="教练性别" prop="gender">
                        <el-radio-group v-model="form.gender">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible=false">取 消</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
        </template>
    </el-dialog>
</template>

<script>
import { checkMobile } from '@/utils/validate'
export default {
    emits: ['success', 'closed'],
    props: {
        teacherTitles: { type: Array, default: () => [] }
    },
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新增教练',
                edit: '编辑教练',
                show: '查看'
            },
            loading: false,
            visible: false,
            isSaveing: false,
            agentLoading: false,
            activeName: 'first',
            form: this.getDefaultRuleForm(),
            rules: {
                titleId: [
                    { required: true, message: '请选择教练头衔', trigger: 'change' }
                ],
                name: [
                    { required: true, message: '请输入教练姓名' }
                ],
                mobile: [
                    { required: true, validator: checkMobile }
                ],
                birthday: [
                    { required: true, message: '请输入教练生日' }
                ],
                level: [
                    { required: true, message: '请选择教练等级', trigger: 'change' }
                ],
                idCardImg: [
                    { required: true, message: '请上传身份证照片', trigger: 'blur' }
                ],
                bankCode: [
                    { required: false, message: '请输入银行卡号' },
                    { pattern: /^(-|[0-9])\d*$/, message: '只能输入数字', trigger: 'blur'}
                ],
                bankFullName: [
                    { required: true, message: '请输入开户银行全称' }
                ],
                bankUserName: [
                    { required: true, message: '请输入开户人姓名' }
                ]
            }
        }
    },
    mounted() {
        
    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            if (mode == 'add') {
                this.resetForm()
            }
            this.visible = true;
            return this
        },
        resetForm() {
            this.form = this.getDefaultRuleForm()
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (!valid) {
                    return false
                }

                let data = {}
				for(let key in this.form) {
					data[key] = this.form[key]
				}

                //身份证正反面处理
				let _idCardImg = []
				if (data.idCardImg && typeof(data.idCardImg) === 'string') {
					data.idCardImg.split(",").forEach(item => {
						item && _idCardImg.push(item.match(/.+\.com(.+)/)[1])
					})
				} else if(data.idCardImg && data.idCardImg.length > 0) {
					data.idCardImg.forEach((item) => {
						_idCardImg.push(item.path)
					})
				}
				data.idCardImg = _idCardImg

                try {
                    this.isSaveing = true;
                    if (this.form.id) {
                        data.teacherId = this.form.id
                        await this.$API.teacher.action.put(data).then(res => {
                            this.isSaveing = false;
                            if (res.error == 0) {
                                this.visible = false
                                this.$notify.success("保存成功,等待总部审核")
                                setTimeout(() => {
                                    this.$router.push({ path: '/teacher/audit/list' })
                                }, 500);
                            }else {
                                this.$notify.error(res.message)
                            }
                        })
                    }else {
                        await this.$API.teacher.action.post(data).then(res => {
                            this.isSaveing = false;
                            if (res.error == 0) {
                                this.visible = false
                                this.$notify.success("保存成功,等待总部审核")
                                setTimeout(() => {
                                    this.$router.push({ path: '/teacher/audit/list' })
                                }, 500);
                            }else {
                                this.$notify.error(res.message)
                            }
                        })
                    }
                } catch (error) {
                    this.isSaveing = false;
                }
            })
        },
        //表单注入数据
        async setData(row) {
            this.loading = true
			await this.$API.teacher.action.get({id: row.id}).then(res => {
                this.loading = false
                let _data = res.data
                let _form = {
                    id: _data.id,
                    titleId: _data.title ? parseInt(_data.title.id) : '',
                    agentId: _data.agent ? parseInt(_data.agent.id) : '',
                    name: _data.name,
                    portrait: _data.portrait && _data.portrait.path ? _data.portrait.url : '',
                    level: _data.level ? _data.level.value : '',
                    mobile: _data.mobile,
                    birthday: _data.birthday,
                    gender: _data.gender ? _data.gender.value : '',
                    status: _data.status ? _data.status.value : 1,
                    bankCode: _data.bankCode,
                    bankFullName: _data.bankFullName,
                    bankUserName: _data.bankUserName,
                    recommender: _data.recommender,
                    idCardImg: [],
                }

                if (res.data.idCardImg) {
                    let images = []
                    res.data.idCardImg.forEach(ele => {
                        ele.url && images.push(ele.url)
                    })
                    _form.idCardImg = images.join(",")
                }

                this.form = _form
            }).finally(() => {
				this.loading = false
			})
        },
        getDefaultRuleForm() {
            return {
                id: 0,
                titleId: "",
                agentId: "",
                name: "",
                portrait: "",
                level: 1,
                mobile: "",
                birthday: "",
                gender: 1,
                idCardImg: [],
                bankCode: "",
                bankFullName: "",
                bankUserName: "",
                recommender: ""
            }
        }
    }
}
</script>

<style lang="scss">
</style>
